<template>
  <div id="news">
    <ul class="list" style="list-style: none;">
      <li v-for="(item, index) in list" :key="index" class="animated fadeInUp">
        <router-link
          :to="{
            path: '/NewsContent',
            query: {
              id: item.aid,
            },
          }"
          >{{ item.title }}</router-link
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    requestData() {
      console.log("1111");

      //新闻列表接口
      var that = this;
      this.$http
        .get(
          "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"
        )
        .then(function(res) {
          // console.log(res.data)
          console.log(res);
          that.list = res.data.result;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
  },
  mounted() {
    this.requestData();
  },
};
</script>

<style type="text/css" scoped>
.list {
  line-height: 34px;
  border-bottom: solid 1px transparent;
  font-size: 16px;
}

.list li::before {
  /*添加项目符号*/
  content: "■";
  /*设置颜色大小边距*/
  color: darkgray;
  font-size: 16px;
  margin-right: 18px;
  margin-left: 5px;
}

.list li {
  text-align: left;
  border: 1px dotted gray;
  margin-bottom: 3px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

a {
  color: #666666;
  text-decoration: none;
  /* font-family: 微软雅黑; */
}

ul {
  border: 1px solid gray;
  padding: 4px;
  border-radius: 8px;
}

li:hover {
  background-color: #a9a9a9;
}
</style>
